"use client";
import { Page, View, Document,Text } from "@react-pdf/renderer";
import { useState, useMemo } from "react";
import { ResumeIframeCSR } from "components/Resume/ResumeIFrame";
import { ResumePDF } from "components/Resume/ResumePDF";
import  {Poster} from "components/Resume/Poster"
import {
  ResumeControlBarCSR,
  ResumeControlBarBorder,
} from "components/Resume/ResumeControlBar";
import { FlexboxSpacer } from "components/FlexboxSpacer";
import { useAppSelector } from "lib/redux/hooks";
import { selectResume } from "lib/redux/resumeSlice";
import { selectSettings } from "lib/redux/settingsSlice";
import { DEBUG_RESUME_PDF_FLAG } from "lib/constants";
import {
  useRegisterReactPDFFont,
  useRegisterReactPDFHyphenationCallback,
} from "components/fonts/hooks";
import { NonEnglishFontsCSSLazyLoader } from "components/fonts/NonEnglishFontsCSSLoader";
import { selectBackgroundConfig, changeBackgroundConfig } from "lib/redux/settingsSlice";

export const Resume = () => {
  const [scale, setScale] = useState(0.8);
  const resume = useAppSelector(selectResume);
  const settings = useAppSelector(selectSettings);
  const document = (
      <Poster
          resume={resume}
          settings={settings}
          isPDF={true}
      />
  );

  const background = useAppSelector(selectBackgroundConfig);

  useRegisterReactPDFFont();
  useRegisterReactPDFHyphenationCallback(settings.fontFamily);

  return (
    <>
      <NonEnglishFontsCSSLazyLoader />
      <div className="relative flex justify-center md:justify-start">
        <FlexboxSpacer maxWidth={50} className="hidden md:block" />
        <div className="relative">
          <section className="h-[calc(100vh-var(--top-nav-bar-height)-var(--resume-control-bar-height))] overflow-hidden md:p-[var(--resume-padding)] relative" >
            {/*{background.type !== 'none' && (
                    <div
                        className="absolute top-0 left-0 w-full h-full z-0"
                        style={{
                          backgroundImage: background.url ? `url(${background.url})` : undefined,
                          opacity: background.opacity,
                          backgroundSize: 'cover',
                          backgroundPosition: 'center'
                        }}
                    />
                )}*/}
            <ResumeIframeCSR
              documentSize={settings.documentSize}
              scale={scale}
              enablePDFViewer={DEBUG_RESUME_PDF_FLAG}
              backgroundConfig={background}
            >
                {/*{background.type !== 'none' && (
                    <div
                        className="absolute top-0 left-0 w-full h-full z-0"
                        style={{
                          backgroundImage: background.url ? `url(${background.url})` : undefined,
                          opacity: background.opacity,
                          backgroundSize: 'cover',
                          backgroundPosition: 'center'
                        }}
                    />
                )}*/}

                <Poster
                    resume={resume}
                    settings={settings}
                    isPDF={DEBUG_RESUME_PDF_FLAG||false}
                />

            </ResumeIframeCSR>
          </section>
          <ResumeControlBarCSR
            scale={scale}
            setScale={setScale}
            documentSize={settings.documentSize}
            document={document}
            fileName={resume.profile.name + " - Resume"}
          />
        </div>
        <ResumeControlBarBorder />
      </div>
    </>
  );
};
